{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link href="__ADMIN__/css/style.css" rel="stylesheet">{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-sm-1 col-form-label">单位 - 项目</label>
                                <div class="col-sm-2">
                                    <select class="form-control company" name="user_id" lay-filter="company">
                                        <option value="0">请选择单位</option>
                                        {volist name="company_list" id="vo"}
                                        <option value="{$vo.user_id}" {if ($info.user_id== $vo.user_id)}selected{
                                        /if}>{$vo.company_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <select class="form-control project" name="project_id" lay-filter="project">
                                        <option value="0">请选择项目</option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>


                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">盖章资料</label>
                                <div class="col-sm-3">
                                    <input type="file" id="upload_file" accept=".doc,.docx,.pdf" style="display: none">
                                    <input type="hidden" name="file_ids" id="file" value="{$info['file_ids']|default=''}"/>
                                    <div class="btn btn-primary btn-lg" id="up_file_btn">上传文件</div>
                                </div>
                            </div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-sm-3">
                                    <style>
                                        #file-list .box {
                                            display: flex;
                                            align-items: center;
                                        }

                                        #file-list .box div {
                                            margin: 20px;
                                            width: 200px;
                                        }
                                    </style>
                                    <div id="file-list"></div>
                                    <input type="hidden" class="file_ids" name="file_ids" value="{$info.file_ids}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">发票</label>
                                <div class="col-sm-3">
                                    <input type="file" id="upload_invoice_file" accept=".png,.jpg,.jpeg,.pdf" style="display: none">
                                    <input type="hidden" name="invoice" id="invoice" value="{$info['invoice']|default=''}"/>
                                    <div class="btn btn-primary btn-lg" id="up_invoice_btn">上传文件</div>
                                </div>
                            </div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-sm-3">
                                    <style>
                                        #invoice-list .box {
                                            display: flex;
                                            align-items: center;
                                        }

                                        #invoice-list .box div {
                                            margin: 20px;
                                            width: 200px;
                                        }
                                    </style>
                                    <div id="invoice-list"></div>
                                    <input type="hidden" class="invoice" name="invoice" value="{$info.invoice}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <input type="hidden" class="subsidy_id" name="id" value="0">

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>{/block}{block name='js'}
<script src="/static/layui/layui.js"></script>
<script type="text/javascript" src="__PLUG__/kindeditor/kindeditor-all.js"></script>
<script>
    var status = "{$info.status}";
    if (status == -1) $('.refuse_box').show();

    layui.use(function () {
        var form = layui.form;
        var layer = layui.layer;

        form.on('radio(status)', function (data) {
            var status = data.value;
            if (status == 2) {
                $('.refuse_box').hide();
                $('.refuse_reason').val('');
            } else {
                $('.refuse_box').show();
            }
        })
    })

</script>

<script>
    //layUI select 处理
    layui.use('form', function () {
        var form = layui.form;

        var company_id = `{$info.company_id}` ? `{$info.company_id}` : 0;
        var project_id = `{$info.project_id}` ? `{$info.project_id}` : 0;

        var company_list = {$company_list_json};
        var option = '<option value="0">请选择项目</option>';

        if (company_id > 0) {
            for (var i = 0; i < company_list.length; i++) {
                if (company_id == company_list[i].id) {
                    var project_list = company_list[i].project_list;
                    project_list.forEach(function (val, key) {
                        var selected = '';
                        if (project_id == val.id) selected = "selected";
                        option += '<option value="' + val.project_id + '" ' + selected + '>' + val.name + '</option>'
                    })
                    break;
                }
            }

            $('.project').html(option);
            form.render('select');
        }

        var choose_project_list = [];
        //监听select的选中
        form.on('select(company)', function (data) {
            choose_company_id = data.value;
            choose_project_list = [];
            var company_list = {$company_list_json};
            var choose_user_id = $('.company').val();
            var option = '<option value="0">请选择项目</option>';

            if (choose_user_id > 0) {
                for (var i = 0; i < company_list.length; i++) {
                    if (choose_user_id == company_list[i].user_id) {
                        choose_project_list = company_list[i].project_list;
                        choose_project_list.forEach(function (val) {
                            option += '<option value="' + val.project_id + '">' + val.name + '</option>'
                        })
                        break;
                    }
                }
            }

            $('.project').html(option);
            form.render('select');
        });

        form.on('select(project)', function (data) {
            const value = data.value;
            choose_project_id = value;
            if (choose_project_list.length > 0) {
                for (const index in choose_project_list) {
                    if (choose_project_list[index].project_id == value) {
                        var {subsidy_id, is_edit, file_arr, invoice_arr} = choose_project_list[index];
                        // 选中的项目
                        if (is_edit) {
                            // 回显
                            $('.subsidy_id').val(subsidy_id)

                            file_list = file_arr.length > 0 ? file_arr.map(({path, ...rest}) => rest) : [];
                            invoice_list = invoice_arr.length > 0 ? invoice_arr.map(({path, ...rest}) => rest) : [];
                            renderFileList();
                            renderInvoiceFileList();
                        }
                        break;
                    }
                }
            }
            form.render('select');
        });


    });

    var choose_company_id = 0;
    var choose_project_id = 0;
    var file_list = [];
    var invoice_list = [];

    $('#up_file_btn').click(function () {
        if (!(choose_company_id && choose_project_id)) {
            layer.msg('请先选择单位 - 项目', {icon: 5});
            return false;
        }

        $('#upload_file').trigger('click')
        $('#upload_file').change(function () {
            var pic = $(this)[0].files[0];
            var formData = new FormData();
            var url = "/Upload/UploadFile/uploadFile";
            var name = pic['name'];

            formData.append('download', pic);
            formData.append('name', name);

            $.ajax({
                url: url,
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.status == 1) {
                        clearFile('upload_file');

                        //上传成功
                        var id = data.data.id;// file表主键id
                        var name = removeFileExtension(data.data.name);

                        var file = {id, name}
                        file_list.push(file);
                        renderFileList()
                    } else {
                        layer.msg(data.info);
                    }
                }
            })
        })
    })

    $('#up_invoice_btn').click(function () {
        if (!(choose_company_id && choose_project_id)) {
            layer.msg('请先选择单位 - 项目', {icon: 5});
            return false;
        }

        $('#upload_invoice_file').trigger('click')
        $('#upload_invoice_file').change(function () {
            var pic = $(this)[0].files[0];
            var formData = new FormData();
            var url = "/Upload/UploadFile/uploadInvoiceFile";
            var name = pic['name'];

            formData.append('download', pic);
            formData.append('name', name);

            $.ajax({
                url: url,
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.status == 1) {
                        clearFile('upload_invoice_file');

                        //上传成功
                        var id = data.data.id;// file表主键id
                        var name = removeFileExtension(data.data.name);
                        var path = data.data.path;

                        var file = {id, name, path}
                        invoice_list.push(file);
                        renderInvoiceFileList()
                    } else {
                        layer.msg(data.info);
                    }
                }
            })
        })
    })

    function renderFileList() {
        var html = '';
        var file_ids = '';
        file_list.forEach((val, key) => {
            var {id, name} = val;
            html += `<div class="box">
                        <div>${name}</div>
                        <a href="javascript: void(0)" onclick="delFile(${key})" class="btn btn-white btn-sm"><i class="iconfont icon-trash"></i> 删除
                        </a>
                    </div>`

            if (file_ids) {
                file_ids += ',' + id;
            } else {
                file_ids = id;
            }
        })

        $('#file-list').html(html);
        $('.file_ids').val(file_ids);
    }

    function renderInvoiceFileList() {
        var html = '';
        var invoice = invoice_list.length > 0 ? JSON.stringify(invoice_list) : '';
        invoice_list.forEach((val, key) => {
            var {id, name} = val;
            html += `<div class="box">
                        <div>${name}</div>
                        <a href="javascript: void(0)" onclick="delInvoiceFile(${key})" class="btn btn-white btn-sm"><i class="iconfont icon-trash"></i> 删除
                        </a>
                    </div>`
        })

        $('#invoice-list').html(html);
        $('.invoice').val(invoice);
    }


    function delFile(index) {
        file_list.splice(index, 1);
        renderFileList();
    }

    function delInvoiceFile(index) {
        invoice_list.splice(index, 1);
        renderInvoiceFileList();
    }

    function removeFileExtension(filename) {
        // 找到最后一个点的位置
        var lastDotPosition = filename.lastIndexOf('.');
        // 如果没有点，返回原始文件名
        if (lastDotPosition === -1) return filename;
        // 截取从开头到最后一个点之前的部分
        return filename.substring(0, lastDotPosition);
    }
</script>{/block}
